import React, {useEffect,useState} from 'react'
import {AtSearchBar } from 'taro-ui'
import {View, Text, Input, Image} from '@tarojs/components'
import store from "../../../store";
import './index.scss'
export default function Search(){
  const [searchInfo,useSearchInfo] = useState('')
  const [searchList,useSearchList] = useState(store.getState().searchList)
  useEffect(() => {
    store.subscribe(storeChange)
  },[])

  // 清空数据
  function setEmpty(){
    const action = {
      type: "set_empty"
    }
    store.dispatch(action)
  }
  // 监听改变
  function storeChange (){
    useSearchList(store.getState().searchList)
  }
  return (
    <View className='my_search'>
      <AtSearchBar actionName='搜索' value={searchInfo} onChange={(e) => {useSearchInfo(e)}} />
      <View className='search_history'>
        <Text>搜索历史</Text>
        <Text className='empty' onClick={() => {setEmpty()}}>清空</Text>
      </View>
      <View className='empty_list'>
        {
          searchList.map((item) => {
            return (
              <Text className='empty_item' key={item.id}>{item.txt}</Text>
            )
          })
        }
      </View>
    </View>
  )
}
